<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>🐷 登入界面</title>
    {% load static %}
    <script src="{% static 'jquery-3.4.1/jquery.min.js' %}"></script>
    <link href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <style>
        body{
            background-image: url("{% static 'img/22.jpg' %}");
        }
        .c1{
            margin-top: 150px;
            background: rgba(0,0,0,0.3);
            padding-top: 50px;
            padding-bottom: 35px;
        }
        .c2{
            background: rgba(255,255,255,0.20);
            border: 0;
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row c1">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-info c2">
              <div class="panel-heading text-center">
                <h3 class="panel-title">登入</h3>
              </div>
              <div class="panel-body">
                  <form id="my_form">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="">用户名</label>
                            <input type="text" id="id_username" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="">密码</label>
                            <input type="password" id="id_password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="">验证码</label>
                            <div class="row">
                                {# 验证码输入框 #}
                                <div class="col-md-6">
                                    <input type="text" id="id_code" class="form-control">
                                </div>
                                {# 验证码图片 #}
                                <div class="col-md-6">
                                    <img src="{% url 'get_valid_code' %}" alt="" height="31px" width="100%" id="id_img">
                                </div>
                            </div>
                        </div>
                  </form>
                  <input type="submit" value="登入" class="btn btn-block btn-warning" id="id_submit"><br>
                  <a href="{% url 'register_name' %}" class="btn btn-block btn-warning">注册</a><br>
                  <a href="{% url 'home_name' %}" class="btn btn-block btn-warning">首页逛逛</a>
              </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 为验证码图片绑定点击事件,点击一次刷新一次
    $('#id_img').click(function () {
        var img_url = $(this)[0].src
        // 只有每次图片路径改变的时候再会向后端发起请求,每次加?号解决
        $(this).attr('src',img_url+'?')
    })
    $('#id_submit').click(function () {
        $.ajax({
            url:'{% url 'login_name' %}',
            method:'post',
            data:{
                username:$('#id_username').val(),
                password:$('#id_password').val(),
                code:$('#id_code').val(),
                csrfmiddlewaretoken:'{{ csrf_token }}'
            },
            success:function (data) {
                if (data.status === 200){
                    $('#id_password').val(''),
                    $('#id_code').val(''),
                    swal({
                      title:data.msg,
                      text:' ',
                      icon: "success",
                      buttons: false,
                      dangerMode: true,
                    })
                    .then(setTimeout(function () {
                        location.href=data.next_url
                    },1000)
                    );
                }else{
                    swal({
                      title: '登入失败!',
                      text: data.msg,
                      icon: "warning",
                      buttons: ["前往注册", "继续登入"],
                      dangerMode: true,
                    })
                    .then((willDelete) => {
                      if (willDelete) {
                        location.href='{% url 'login_name' %}'
                      } else {
                        location.href='{% url 'register_name' %}'
                      }
                    });
                }
            }
        })
    })
</script>
</body>
</html>